<template>
<div class="form" v-loading="formLoading">
  <el-form :rules="rules" :model="form" label-position="top" ref="form" :disabled="formDisabled">
    <div class="form-title">选择认证的业务类型<span class="sub-title">{{'(至少选一项，可多选)'}}</span></div>
    <div class="form-wrapper">
      <div class="error" v-if="chooseError">{{'至少选择一项业务类型'}}</div>
      <!-- <el-form-item prop="checkList"> -->
        <!-- <el-checkbox-group v-model="checkList"> -->
        <el-row>
      <el-col :span="6" >
        <el-form-item prop="isbusiness" size="medium">
          <el-checkbox v-model="form.isbusiness" true-label="1" false-label="0">商城卖家</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="isbuyer">
          <el-checkbox v-model="form.isbuyer" true-label="1" false-label="0">商城买家</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="isopcer">
          <el-checkbox v-model="form.isopcer" true-label="1" false-label="0">开证公司</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="isagent">
          <el-checkbox v-model="form.isagent" true-label="1" false-label="0">国外代理</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="ishuodai">
          <el-checkbox v-model="form.ishuodai" true-label="1" false-label="0">货代公司</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="isstorage">
          <el-checkbox v-model="form.isstorage" true-label="1" false-label="0">仓储公司</el-checkbox>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="isbusiness">
          <el-checkbox v-model="form.iscustom" true-label="1" false-label="0">业务客户</el-checkbox>
        </el-form-item>
      </el-col>
        </el-row>
        <!-- </el-checkbox-group> -->
      <!-- </el-form-item> -->

    </div>
    <div class="form-title">企业详细信息</div>
    <div class="form-wrapper">
      <el-form-item label="企业注册名称" prop="allname">
      <template #label>
        <div class="form-label">企业注册名称</div>
      </template>
      <el-input v-model="form.allname" placeholder="请填写营业执照上的全称"></el-input>
    </el-form-item>
    <!-- <el-form-item prop="abbreviation">
      <template #label>
        <div class="form-label">公司简称</div>
      </template>
      <el-input v-model="form.abbreviation" placeholder="请填写公司简称"></el-input>
    </el-form-item> -->
    <el-form-item label="企业税号" prop="qtaxnum">
      <template #label>
        <div class="form-label">企业税号</div>
      </template>
      <el-input v-model="form.qtaxnum" placeholder="请填写18位统一社会信用代码"></el-input>
    </el-form-item>
    <el-form-item label="企业法人" prop="qlegalperson">
      <template #label>
        <div class="form-label">企业法人</div>
      </template>
      <el-input v-model="form.qlegalperson" placeholder="请填写企业法人姓名"></el-input>
    </el-form-item>
    <!-- <el-form-item  prop="allidcard">
      <template #label>
        <div class="form-label">法人身份证号</div>
      </template>
      <el-input v-model="form.allidcard" placeholder="请填写企业法人身份证号"></el-input>
    </el-form-item> -->
    <!-- <el-form-item  prop="qcomptype">
      <template #label>
        <div class="form-label">公司类型</div>
      </template>
      <el-input v-model="form.qcomptype" placeholder="请填写公司类型"></el-input>
    </el-form-item> -->
    <!-- <el-form-item  prop="qcapital">
      <template #label>
        <div class="form-label">注册资本</div>
      </template>
      <el-input v-model="form.qcapital" placeholder="请填写企业注册资本"></el-input>
    </el-form-item> -->
    <el-form-item label="企业地址" prop="alladdr1">
      <template #label>
        <div class="form-label">企业地址</div>
      </template>
      <el-row>
        <el-col :span="6">
          <!-- <el-form-item prop="alladdr3"> -->
            <el-select v-model="form.alladdr1" placeholder="省" filterable   @change="onProvinceChange(form.alladdr1)">
              <el-option v-for="(item,index) in address.province" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          <!-- </el-form-item> -->
        </el-col>
        <el-col :span="6">
          <!-- <el-form-item prop="alladdr2"> -->
            <el-select v-model="form.alladdr2" placeholder="市" filterable   @change="onCityChange(form.alladdr2)">
              <el-option v-for="(item,index) in address.city" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          <!-- </el-form-item> -->
        </el-col>
        <el-col :span="6">
          <!-- <el-form-item prop="alladdr1"> -->
            <el-select v-model="form.alladdr3" placeholder="区" filterable  >
              <el-option v-for="(item,index) in address.district" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          <!-- </el-form-item> -->
        </el-col>
      </el-row>
      <!-- <el-input v-model="form.alladdr3"></el-input> -->
    </el-form-item>
    <el-form-item label="详细街道" prop="alladdrfull">
      <template #label>
        <div class="form-label">详细街道</div>
      </template>
      <el-input v-model="form.alladdrfull" placeholder="请填写企业地址的详细街道信息"></el-input>
    </el-form-item>

    </div>

    <div class="form-title">企业银行信息</div>
    <div class="form-wrapper">
      <el-form-item label="开户银行" prop="allbankname">
      <template #label>
        <div class="form-label">开户银行</div>
      </template>
      <el-input v-model="form.allbankname" placeholder="请填写企业的开户银行名称"></el-input>
    </el-form-item>
    <el-form-item label="银行账号" prop="allbankaccount">
      <template #label>
        <div class="form-label">银行账号</div>
      </template>
      <el-input v-model="form.allbankaccount" placeholder="请填写银行账号"></el-input>
    </el-form-item>
    <!-- <el-form-item  prop="qcapitalbz">
      <template #label>
        <div class="form-label">币种</div>
      </template>
      <el-select v-model="form.qcapitalbz" placeholder="请填写币种" filterable>
        <el-option v-for="(item,index) in [{label:'人民币',value:'0'}]" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item> -->

    </div>

    <div class="form-title">联系人信息</div>
    <div class="form-wrapper">
      <el-form-item label="联系人姓名" prop="allpeople">
      <template #label>
        <div class="form-label">联系人姓名</div>
      </template>
      <el-input v-model="form.allpeople" placeholder="请填写企业联系人姓名"></el-input>
    </el-form-item>
    <el-form-item label="联系人手机号" prop="allphone1">
      <template #label>
        <div class="form-label">联系人手机号</div>
      </template>
      <el-input v-model="form.allphone1" placeholder="请填写联系人手机号码"></el-input>
    </el-form-item>

    </div>
    <div class="form-title">企业资料信息</div>
    <div class="form-wrapper upload-container">
      <!-- <el-form-item prop="alllogo">
        <template #label>
          <div class="form-label">企业Logo</div>
        </template>
        <el-row :gutter="78">
          <el-col :span="1.5">
            <UploadImg ref="alllogoUploader" :disabled="formDisabled" @handleGetUrl="form.alllogo=$event"></UploadImg>
          </el-col>
          <el-col :span="1.5">
            <div class="upload-sample">
              <img src="@/assets/images_accredited/syt_pic01.png" alt="syt_pic">
              <p>示意图</p>
            </div>
          </el-col>

          <el-col :span="1.5">
            <div class="upload-tips">
              <p>· 支持JPG/PNG/JPEG格式的图片</p>
              <p>· 大小≤5M</p>
              <p>· 企业Logo</p>
            </div>
          </el-col>
        </el-row>

      </el-form-item> -->

      <el-form-item label="营业执照影印件" prop="qbusinesslicence">
        <template #label>
          <div class="form-label">营业执照影印件</div>
        </template>

        <el-row>
          <el-col :span="1.5">
            <UploadImg ref="licenceUploader" :disabled="formDisabled" @handleGetUrl="form.qbusinesslicence=$event" :src="form.qbusinesslicence"></UploadImg>
          </el-col>

          <el-col :span="1.5">
            <div class="upload-sample" @click="handlePreviewSample(0)">
              <img src="@/assets/images_accredited/syt_pic01.png" alt="syt_pic">
              <p>示意图</p>
            </div>
          </el-col>

          <el-col :span="1.5">
            <div class="upload-tips">
              <p>· 支持JPG/PNG/JPEG格式的图片</p>
              <p>· 大小≤5M</p>
              <p>· 营业执照原件的彩色扫描件或复印件，<span>必须加盖公章</span></p>
            </div>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="开票资料" prop="allinvoicei">
        <template #label>
          <div class="form-label">开票资料</div>
        </template>

        <el-row>
          <el-col :span="1.5">
            <UploadImg ref="invoiceUploader" :disabled="formDisabled" @handleGetUrl="form.allinvoicei=$event" :src="form.allinvoicei"></UploadImg>
          </el-col>

          <el-col :span="1.5">
            <div class="upload-sample" @click="handlePreviewSample(1)">
              <img src="@/assets/images_accredited/syt_pic02.png" alt="syt_pic">
              <p>示意图</p>
            </div>
          </el-col>

          <el-col :span="1.5">
            <div class="upload-tips">
              <p>· 支持JPG/PNG/JPEG格式的图片</p>
              <p>· 大小≤5M</p>
              <p>· 开票资料的彩色扫描件或复印件，<span>必须加盖公章</span></p>
            </div>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="授权书" prop="qauthbook">
        <template #label>
          <div class="form-label">授权书</div>
        </template>

        <el-row>
          <el-col :span="1.5">
            <UploadImg ref="qauthbook" :disabled="formDisabled" @handleGetUrl="form.qauthbook=$event" :src="form.qauthbook"></UploadImg>
          </el-col>
          <el-col :span="1.5">
            <div class="upload-sample" @click="handlePreviewSample(2)">
              <img src="@/assets/images_accredited/syt_pic03.png" alt="syt_pic">
              <p>示意图</p>
            </div>
          </el-col>

          <el-col :span="1.5">
            <div class="upload-tips">
              <a class="download" href="/word/授权书模板.docx">授权书模板下载</a>
              <p>· 支持JPG/PNG/JPEG格式的图片</p>
              <p>· 大小≤5M</p>
              <p>· 授权书原件的彩色扫描件或复印件，<span>必须加盖公章</span></p>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </div>
  </el-form>
  <el-row type="flex" justify="center" class="form-submit">
    <el-col :span="1.5">
    <button class="submit-button" @click="handleSubmitForm" v-show="!formDisabled">确认提交</button>
    </el-col>
  </el-row>
  <el-dialog :visible.sync="dialogVisible" ref="dialog">
    <img width="100%" :src="preview" alt="preview">
  </el-dialog>
</div>

</template>

<script>
import {approve,getShopInfo,uploadFile,getUrl} from "@/api/shop/api";
import UploadImg from '@/components/UploadImg'
import previewImgLicence from '@/assets/images_accredited/营业执照.jpg'
import previewImgInvoice from '@/assets/images_accredited/开票资料.png'
import previewBook from '@/assets/images_accredited/授权书.jpg'

export default {
  name:'ApproveForm',
  props:{
    form:{
      type:Object,
    },
    address:{
      type:Object
    },
    pictures:{
      type:Object
    }
  },
  components:{
    UploadImg
  },
  data(){
    return {
       rules:{
        allname:{
          required:true,
          trigger:'blur',
          message:'请填写企业注册名称'
        },
        qtaxnum:{
          required:true,
          trigger:'blur',
          message:'请填写企业税号'
        },
        qlegalperson:{
          required:true,
          trigger:'blur',
          message:'请填写企业法人'
        },
        alladdr3:{
          required:true,
          trigger:'blur',
          message:'省不能为空'
        },
        alladdr2:{
          required:true,
          trigger:'blur',
          message:'市不能为空'
        },
        alladdr1:{
          required:true,
          trigger:'blur',
          message:'请填写企业地址'
        },
        alladdrfull:{
          required:true,
          trigger:'blur',
          message:'请填写详细街道'
        },
        allbankname:{
          required:true,
          trigger:'blur',
          message:'请填写开户银行名称'
        },
        allbankaccount:{
          required:true,
          trigger:'blur',
          message:'请填写银行账号'
        },
        allpeople:{
          required:true,
          trigger:'blur',
          message:'请填写企业联系人'
        },
        allphone1:[{
          required:true,
          trigger:'blur',
          message:'请填写联系人手机号'
        },{
          pattern:/^(?:(?:\+|00)86)?1\d{10}$/,
          trigger:'blur',
          message:'请输入正确的手机号码'
        }],
        qbusinesslicence:{
          required:true,
          trigger:'blur',
          message:'营业执照必须上传'
        },
        allinvoicei:{
          required:true,
          trigger:'blur',
          message:'开票资料必须上传'
        },
        qauthbook:{
          required:true,
          trigger:'blur',
          message:'授权书必须上传'
        },
      },
      formLoading:false,
      chooseError:false,
      checkList:[],
      dialogVisible:false,
      preview:'',
      previewArray:[previewImgLicence,previewImgInvoice,previewBook]
    }
  },
  computed:{
    formDisabled(){
      //绑定企业状态 -1:已删除 0:未提交 1:待审核 2:驳回 3:审核通过 4:冻结 5:无须认证 6:未绑定
      if(this.form.status==='0' || this.form.status==='2'){
        return false
      }else{
        return true
      }
    }
  },
  methods:{
    handlePreviewSample(index){
      this.preview = this.previewArray[index]
      this.dialogVisible = true
    },
    onProvinceChange(province){
      //修改选项
      this.$emit('onProvinceChange',province)
    },
    onCityChange(city){
      this.$emit('onCityChange',city)
    },
    validateChoose(){
      return +this.form.isopcer||
      +this.form.isagent||
      +this.form.ishuodai||
      +this.form.isstorage||
      +this.form.iscustom||
      +this.form.isbusiness||
      +this.form.isbuyer
    },
    handleSubmitForm(){
      this.chooseError = false
      console.log(this.validateChoose());
      console.log(Boolean(this.validateChoose()));
      if(!this.validateChoose()){
        this.$modal.msgError('至少选一项业务，可多选')
        this.chooseError=true
        return
      }
      this.$refs.form.validate(valid=>{
        if(valid){
          //弹窗提示：是否确认提交
          this.$confirm('提交前请确保填写的企业认证信息正确，是否确认提交？', '提示', {
            confirmButtonText: '确认提交',
            cancelButtonText: '返回',
            type: 'warning'
          }).then(() => {
            this.$modal.loading('提交中...')
            approve(this.form).then(res=>{
              this.$modal.msgSuccess('提交成功')
              location.reload()
            }).finally(()=>{
              this.$modal.closeLoading()
            })
          }).catch(() => {

          });
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .upload-container .el-row .el-col:not(:last-child){
  margin-right: .78rem;
}

.form{
  width: 100%;
}

.form-submit{
  margin-top: 1.3rem;
}

.form-wrapper{
  padding-left: .21rem;
}

.form-label{
  display: inline-block;
  font-size: .2rem;
  color: #575757;
  line-height: .2rem;
  margin-bottom: .23rem;
}
.form-title{
  margin: .5rem 0;
  position: relative;
  padding-left: .21rem;
  line-height: .32rem;
  height: .32rem;
  font-size: .3rem;
  color: #565656 ;
  font-weight: 700;
  &::before{
    position: absolute;
    content:'';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .06rem;
    height:.28rem;
    background-color: #234EB1;
  }
  .sub-title{
    margin-left: .1rem;
    font-weight: 400;
    color: #234EB1;
    font-size: .2rem;
  }
}

.error{
  color: #ff4949;
  font-size: .14rem;
  line-height: 1;
  padding-top: .04rem;
}

.submit-button{
  width: 3.86rem;
  height: .85rem;
  background: #234EB1;
  border-radius: .1rem;
  color: #fff;
  font-size: .28rem;
  cursor: pointer;
  outline:none;
  border:none;
}

.upload-sample{
  cursor: pointer;
  background-color: #F5F6FA;
  border-radius: .08rem;
  height: 3.22rem;
  width: 3.22rem;
  display: flex;
  flex-flow:column nowrap;
  align-items: center;
  img{
    // border: .01rem dashed #999;
    margin-top: .2rem;
    width: 2.76rem;
  }
  p{
    margin-top: .22rem;
    color: #777777 ;
    font-size: .18rem;
  }
}

.upload-tips{
  height: 3.22rem;
  display: flex;
  flex-flow:column nowrap;
  justify-content: flex-end;
  font-size: .16rem;
  line-height: 2;
  color: #B9BAC1;
  span{
    color: #333 ;
  }
  .download{
    margin-bottom: .4rem;
    cursor: pointer;
    text-decoration: underline;
    color: #234EB1;
    font-weight: 700;
    font-size: .18rem;

  }
}


//el-checkbox样式
::v-deep .el-checkbox__input .el-checkbox__inner{
  background-color: #EEEEEE;
  border-color:#D2D2D2;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #D2D2D2 ;
  border-color:#D2D2D2;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after{
  border-color: #fff ;
}

::v-deep .el-checkbox .el-checkbox__label{
  vertical-align: middle;
  padding-left: .18rem;
  line-height: .26rem;
  font-size: .26rem;
  color: #575757 ;

}

::v-deep .el-checkbox.is-checked .el-checkbox__label{
  color: #234EB1;
  font-weight: 700;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #EEEEEE;
  border-color: #dfe4ed;
  color: #A9A9A9;
  cursor: not-allowed;
}

::v-deep .el-checkbox__inner {
  content: '';
  display: inline-block;
  position: relative;
  border: .01rem solid #D2D2D2!important;
  border-radius: .04rem;
  box-sizing: border-box;

  width: .2rem;
  height: .2rem;
  background-color: #EEEEEE ;
  z-index: 1;
  transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}

::v-deep .el-checkbox.is-checked .el-checkbox__inner::before{
  content:'';
  width: .2rem;
  height: .2rem;
  background: url('~@/assets/images_accredited/qyrz_choose_icon.png') center;
  background-size:.2rem;
  position: absolute;
  border-radius: .04rem;

}

::v-deep .el-checkbox__inner::after {
  content: "";
  display: none;
  // width: .2rem;
  // height: .2rem;
  // background: url(~@/assets/images_accredited/qyrz_choose_icon.png) cover center;
  // position: absolute;
  // left: 0;
  // top: 0;
  // -webkit-box-sizing: content-box;
  // box-sizing: content-box;

  // border: .03rem solid #FFFFFF;
  // border-left: 0;
  // border-top: 0;
  // height: .1rem;
  // left: .06rem;
  // position: absolute;
  // top: .02rem;
  // -webkit-transform: rotate(45deg) scaleY(0);
  // transform: rotate(45deg) scaleY(0);
  // width: .03rem;
  // -webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
  // transition: -webkit-transform 0.15s ease-in 0.05s;
  // transition: transform 0.15s ease-in 0.05s;
  // transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
  // -webkit-transform-origin: center;
  // transform-origin: center;
}

::v-deep .el-input__inner{
  height: .7rem;
  border-radius: .06rem;
  padding: .28rem .3rem .27rem .3rem;
  // background-color: #EEEEEE ;
  background-color: #fff;
  // color: #A9A9A9;
  color: #333;
  font-size: .18rem;
  border-color:#D2D2D2;
  &:focus{
    border-width: .02rem!important;
    border-color:#C69766!important;
  }
}

::v-deep .el-form-item__error{
  font-size: .14rem;
}

</style>
